<!DOCTYPE>
<html>
<head><title>GA Dash Demo</title></head>
<body>

  <!-- Add Google Analytics authorization button -->
  <button id="authorize-button" style="visibility: hidden">
        Authorize Analytics</button>

  <!-- Div element where the Line Chart will be placed -->
  <div id='visits-chart'></div>
  <div id='device-chart'></div>
  <div id='browser-chart'></div>

  <!-- Load all Google JS libraries -->
  <script src="https://www.google.com/jsapi"></script>
  <script src="gadash-1.0.js"></script>
  <script src="https://apis.google.com/js/client.js?onload=gadashInit"></script>
  <script>
    // Configure these parameters before you start.
    var API_KEY = 'AIzaSyDdwq1wjTXlmfCARY1MG8TM2nvMoBExFzI';
    var CLIENT_ID = '202554519670-27h6osg5cv7tcjt1p266pi8drfsvoog4.apps.googleusercontent.com';
    var TABLE_ID = 'ga:84546033';
    // Format of table ID is ga:xxx where xxx is the profile ID.

    gadash.configKeys({
      'apiKey': API_KEY,
      'clientId': CLIENT_ID
    });

    // Create a new Chart that queries visitors for the last 30 days and plots
    // visualizes in a line chart.
    var chart1 = new gadash.Chart({
      'type': 'LineChart',
      'divContainer': 'visits-chart',
      'last-n-days':30,
      'query': {
        'ids': TABLE_ID,
        'metrics': 'ga:visitors,ga:visits,ga:pageviews',
        'dimensions': 'ga:date'
      },
      'chartOptions': {
        height:600,
        title: 'Bezoekers politie.nl (laatste 30 dagen)',
        hAxis: {title:'Datum'},
        vAxis: {title:'Aantal bezoekers'},
        curveType: 'function'
      }
    }).render();
	
	// Create a new Chart that queries browsers of visitors for the last 30 days and plots
    // visualizes in a line chart.
    var chart1 = new gadash.Chart({
      'type': 'PieChart',
      'divContainer': 'device-chart',
      'last-n-days':30,
      'query': {
        'ids': TABLE_ID,
        'metrics': 'ga:visitors',
		'sort': '-ga:visitors',
		'filters':'ga:visitors>10',
        'dimensions': 'ga:mobileDeviceInfo',
		'max-results': '10'
      },
      'chartOptions': {
        height:600,
        title: 'Devices politie.nl (laatste 30 dagen)',
        hAxis: {title:'bezoekers'},
        vAxis: {title:'device'},
        curveType: 'function',
      }
    }).render();
	
	// Create a new Chart that queries browsers of visitors for the last 30 days and plots
    // visualizes in a line chart.
    var chart1 = new gadash.Chart({
      'type': 'BarChart',
      'divContainer': 'browser-chart',
      'last-n-days':30,
      'query': {
        'ids': TABLE_ID,
        'metrics': 'ga:visitors',
		'sort': '-ga:visitors',
		'filters':'ga:visitors>10',
        'dimensions': 'ga:browser',
		'max-results': '10'
      },
      'chartOptions': {
        height:600,
        title: 'Browsers politie.nl (laatste 30 dagen)',
        hAxis: {title:'bezoekers'},
        vAxis: {title:'browser'},
        curveType: 'function'
      }
    }).render();
	
	
  </script>
</body>
</html>